<template>
  <div class="box-bottom">
    <div class="nav">预警状态统计</div>
    <div id="pillarrEchart" class="conton"></div>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/service/baseService";
import * as echarts from "echarts";

export default defineComponent({
  name: "RealTimeTree",
  setup() {
    const state = reactive({
      myChart: null
    });
    return {...useView(state), ...toRefs(state)};
  },
  mounted() {
    let chartDom = document.getElementById("pillarrEchart");
    this.myChart = echarts.init(chartDom);
    this.getWarningStatus();
  },
  methods: {
    // 获取信息
    getWarningStatus() {
      baseService.get(`/homeData/getWarningStatus`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        let legendData = Object.entries(res.data).map(([name]) => (name));
        let seriesData = Object.entries(res.data).map(([name, value]) => (value));

        let option = {
          grid: {
            left: "2%",
            top: "10%",
            right: "2%",
            bottom: "5%",
            containLabel: true //grid 区域是否包含坐标轴的刻度标签。
          },
          tooltip: {
            trigger: "axis",
            // 坐标轴悬浮
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#B248CA"
              }
            }
          },
          xAxis: [
            {
              type: "category",
              data: ["未处理", "处理中", "已完成"],
              axisTick: {
                //坐标轴刻度
                show: false,
                alignWithLabel: true //刻度和文字对齐
              },
              nameLocation: "start", //坐标轴名称显示位置
              nameGap: "9", //坐标轴名称与轴线之间的距离。
              boundaryGap: ["1%", "4%"], //不从0%开始
              textStyle: {
                width: "54"
              },
              axisLabel: {
                interval: 0, //文字间没有间隔
                // rotate: "20",
                formatter: function (params) {
                  //五个字一行
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 5;
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr; // 最终拼成的字符串
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                }
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                show: true,
                formatter: "{value}"
              },
              splitLine: {show: false}
            }
          ],
          series: [
            {
              name: "直接访问",
              type: "bar",
              barWidth: "20%",
              barGap: "56",
              data: seriesData,
              itemStyle: {
                normal: {
                  barBorderRadius: [7, 7, 0, 0], //圆柱圆角
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      //渐变色
                      offset: 0,
                      color: "#FAD036"
                    },
                    {
                      offset: 1,
                      color: "#EF2409"
                    }
                  ])
                }
              }
            }
          ]
        };

        option && this.myChart.setOption(option);
      });
    }
  }
});
</script>

<style lang="scss" scoped>
.nav {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 16px;
  color: #00C4FF;
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 24px;
  //background-color: rgb(12, 90, 110);
  background-image: linear-gradient(to left, rgba(29, 66, 112, 00), rgba(29, 66, 112, 0.76));
}

.box-bottom {
  color: #fff;
  width: 100%;
  height: 34%;
  padding: 0px;
  overflow: hidden;
  position: relative;
  flex: 1;

  .conton {
    width: 100%;
    height: 80%;
  }
}
</style>
